<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <style>
        .el-input {
            width: 340px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="margin-top: 15px;">
            <el-input placeholder="请输入订单编号" v-model="orderId" class="input-with-select el-input">
                <el-button @click="searchOrder" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <template>
            <el-radio-group v-model="orderType" @change="showOrderType">
                <el-radio label="1">待排单</el-radio>
                <el-radio label="2">待生产</el-radio>
                <el-radio label="3">生产中</el-radio>
                <el-radio label="4">已入库</el-radio>
                <el-radio label="5">已结束</el-radio>
            </el-radio-group>
        </template>
        <template>
            <el-dialog title="addLaser" :visible.sync="dialogVisible" @close="closeDialog">
                <el-form :module="currentOrder">
                    <el-form-item label="生产产线">
                        <el-select v-model="currentOrder.productionName" placeholder="请选择生产产线">
                            <el-option v-for="line in lines" :label="line.productionName" :value="line.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="使用打印机">
                        <el-select v-model="currentOrder.printer" placeholder="请选择打印机">
                            <el-option v-for="printer in printers" :label="printer.pNum" :value="printer.pNum"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产时间">
                            <el-date-picker
                                    type="date"
                                    placeholder="选择日期"
                                    v-model="currentOrder.productTime"
                                    style="width: 100%;"
                                    value-format="yyyy-MM-dd"
                            ></el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="add">确 定</el-button>
                </div>
            </el-dialog>
        </template>


        <el-table
                :data="orders"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="订单编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pName"
                    label="产品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pEnterprise"
                    label="产品型号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="生产数量"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    label="生产产线"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="printer"
                    label="使用打印机"
                    width="120">
            </el-table-column>
            <el-table-column
                    :formatter="this.formatData"
                    prop="productTime"
                    label="生产时间"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="productStatus"
                    label="生产状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="addToLaser(scope.$index, scope.row)"
                            type="text"
                            size="small">
                        加入到激光码生成
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[2, 3, 4,5]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>


</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                orderType:'',
                orderId:"",
                orders:[],
                current:1,
                pageSize:2,
                total:0,
                dialogVisible:false,
                currentOrder:{},
                lines:[],
                printers:[]
            }
        },
        methods:{
            formatData(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
            showOrderType(val){
                this.orderType=val;
              console.log("当前状态"+this.orderType) ;
            },
           handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                axios.get("/produce/orders?current="+val+"&pageSize="+this.pageSize)
                    .then(res=>{
                        this.orders=res.data.records;
                        this.current = res.data.current;
                        this.total = res.data.total;
                        console.log(this.orders);
                        console.log(this.current);
                    })
            },
            searchOrder(){
                console.log(this.orderId);
                console.log(this.orderType);
                    axios.get("/produce/order?orderId="+this.orderId + "&orderType="+this.orderType)
                        .then(res=>{
                            if (res.data.records==null){
                                this.orders=res.data;
                            }else {
                                this.orders=res.data.records;
                                console.log(this.orders);
                                this.current = res.data.current;
                                this.total = res.data.total;
                            }
                        })
            },
            addToLaser(index,data){
                this.dialogVisible=true;
                this.currentOrder=JSON.parse(JSON.stringify(data));
                console.log(this.currentOrder)
            },
            add(){
                if (this.currentOrder.productTime==null){
                    alert("必须填写生产日期");
                    return;
                }
                console.log(this.currentOrder.productTime);
                axios.put("/produce/toLaser",this.currentOrder)
                .then(res=>{
                    if (res.data=="ok"){
                        if (confirm("加入成功，是否跳转该页面？")){
                            location.href="/page/toPrint/lasers.html?orderId="+this.currentOrder.orderId;
                            // console.log(this.currentOrder.orderId);
                        }
                    }
                })
                this.dialogVisible=false;
            },
            loadLines(){
                axios.get("/produce/lines")
                .then(res=>{
                    this.lines=res.data;
                    console.log("产线"+this.lines);
                })
            },
            loadPrinters(){
                axios.get("/produce/printers")
                .then(res=>{
                    this.printers=res.data;
                    console.log("打印机"+this.printers);
                })
            }
        },
        mounted(){
            this.handleCurrentChange(1,this.pageSize);
            this.loadPrinters();
            this.loadLines();
        }
    })
</script>
</html>